<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<title>客户流失分析</title>
<meta charset="UTF-8">

<link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="../../jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="../../jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){
        pageList(1,5);

        //用来处理分页请求
        function pageList(pageNo,pageSize) {

            //将全选的复选框的√干掉
            $("#qx").prop("checked",false);

            //查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
            $("#search-name").val($.trim($("#hidden-name").val()));
            $.ajax({

                    url: "/chart/drain/lost/"+pageNo+"/"+pageSize,
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        var html = "";

                        //每一个n就是每一个市场活动对象
                        $.each(data.dataList, function (i, n) {


                                html += '<tr class="active">';
                                html += '<td>'+n.lstCustNo+'</td>';
                                html += '<td>'+new Date(n.lstLostDate).format("yyyy")+'</td>';
                                html += '<td>'+n.lstCustName+'</td>';
                                html += '<td>'+n.lstCustManagerName+'</td>';
                                html += '<td>'+n.lstReason+'</td>';
                                html += '</tr>';

                        });
                        $("#drainBody").html(html);

                        //计算总页数
                        var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
                        //数据处理完毕后，结合分页查询，对前端展现分页信息
                        $("#drainPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数时在，点击分页组件的时候触发的
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                }
            )}

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth() + 1, // 月份
                "d+" : this.getDate(), // 日
                "h+" : this.getHours(), // 小时
                "m+" : this.getMinutes(), // 分
                "s+" : this.getSeconds(), // 秒
                "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
                "S" : this.getMilliseconds()
                // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for ( var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        });

</script>
</head>
<body>

	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>客户流失分析</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input class="form-control" type="text" id="search-custName">
					  <div class="input-group-addon">客户经理</div>
					  <input class="form-control" type="text" id="search-custManagerName">
				    </div>

				  </div>

				  <button type="submit" class="btn btn-default" id="searchBtn">查询</button>
				  
				</form>
			</div>

			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td>编号</td>
							<td>年份</td>
							<td>客户</td>
							<td>客户经理</td>
							<td>流失原因</td>
						</tr>
					</thead>
					<tbody id="drainBody">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="drainPage"></div>
			</div>

		</div>
		
	</div>
</body>
</html>